Auto-Refreshing Content List

Latest update: July 2013

This tutorial will show you how to set automatic updating for your FlashAir content list. We will use command.cgi to get the update status of the FlashAir and will update the content list accordingly.

Note: To get the most out of this tutorial, we suggest that you insert your FlashAir device into a digital camera. When you take a new photo or delete a photo, this application will show the changed contents of the FlashAir device.

This tutorial follows iOS Tutorial 4: Displaying Image Thumbnails in the FlashAir iOS app tutorial series.

Creating the Screen Layout

The screen layout for this application is the same as in iOS Tutorial 4: Displaying Image Thumbnails. Please see that page for implementation details.

Writing Code

Checking for File Updates

We want to have the content list automatically update when an update check, done using command.cgi with op=102, indicates that the content has been modified. We will create another thread, and we will use this command on this thread at intervals of a few seconds. We will use NSString stringWithContentsOfURL to execute the CGI command. This NSString function will allow us to get the information at the specified URL in UTF-8 encoding and will return any error data in an NSError object.

FSViewController.m

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    [self getFileList:@"/DCIM"];

    // Start updateCheck
    [NSThread detachNewThreadSelector:@selector(updateCheck) toTarget:self withObject:nil];
}

- (void)updateCheck
{
    bool status = true;
    NSError *error = nil;
    NSString *path,*sts;
    NSURL *url102 = [NSURL URLWithString:@"http://flashair/command.cgi?op=102"];

    while (status)
    {
        // Run cgi
        sts =[NSString stringWithContentsOfURL:url102 
                                            encoding:NSUTF8StringEncoding error:&error];
        if ([error.domain isEqualToString:NSCocoaErrorDomain]){
            NSLog(@"error102 %@\n",error);
            status = false;
        }else{
            // If flashair is updated then reload
            if([sts intValue] == 1){
                path = [self.labelDirectory.text 
                                    substringToIndex:[self.labelDirectory.text length] - 1];
                [self performSelectorOnMainThread:@selector(reloadView:) 
                                                        withObject:path waitUntilDone:YES];
            }
        }
        [NSThread sleepForTimeInterval:0.1f];        
    }
}

- (void) reloadView:(NSString *)path {
    [self getFileList:path];
    [self.tableViewFileList reloadData];
}

• Lines 8-9:
  We create another thread, and we call updateCheck() on this thread.
• Line 17:
  We set the URL that we will use for the CGI command and specify the argument as op=102.
• Lines 21-23:
  The CGI command is executed here. We encode the returned characters in UTF-8. In order to do this, we specify encoding:NSUTF8StringEncoding.
• Lines 32-33:
  Since we need to use the main thread to update the Table View, we have the update process call reloadView on the main thread.
• Lines 41-42:
  The reloadView function is implemented here.

Result

Once we finish writing the program, we will check to see if it works.

Currently, the number of items found in the sample directory is 9. (This file count is displayed by the layout that we created in the previous tutorial.)

Using another device that a FlashAir can be embedded in, we will add a file to the FlashAir. For example, if the FlashAir is inserted in a digital camera, we will take a photo. When we look at the contents list, another item will have been added to the list. Also, the number of items found in the sample directory will have increased to 10.

See if the thumbnail image matches the photo you just took. Select the new item in the content list to view it in the image viewing screen.

The new photo is displayed correctly in the image viewing screen.

You have now completed the tutorial on getting image thumbnails.

Sample Code

ios_tutorial_05.zip (25KB)

All sample code on this page is licensed under BSD 2-Clause License